<!--
 * @Description: 
 * @Author: Wen
 * @Date: 2024-11-06 16:31:08
 * @LastEditors: Wen
 * @LastEditTime: 2024-11-07 10:23:39
 * 太棒了，又坚持了一天
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript</title>
    <!-- 内部脚本
    <script>
        alert("hello,world");
     </script> -->
     <!-- 外部脚本 -->
      <script src="./js/index.js">
      </script>
      <script>
        function add(a,b){
            console.log("🚀 ~ add ~ a+b:", a+b);
            return a+b;
        }
        var c = add(1,2);
        console.log("🚀 ~ c:", c)
        var myadd =function(a,b){
            return a+b;
        }
        var d = myadd(3,4);
        console.log("🚀 ~ d:", d)
      </script>
      
</head>
<body>
    喜欢的水果: <input id="inputFruit" type="text" 
    placeholder="请输入你喜欢的水果:" value="苹果">
    <br>
    <input id="btn1" type="button" value="按钮1" onclick="crickBtn1()">
    <input id="btn2" type="button" value="按钮2" onclick="add(1,2)">
    <input id="btn3" type="button" value="按钮3">

</body>
<script>
    // 获取输入框元素
   var fruitElement = document.getElementById ("inputFruit");
    // alert("阻塞运行");
   console.log("🚀 ~ fruitElement:", fruitElement);
   if (fruitElement) {
    var fruitValue =fruitElement.value;
    console.log("🚀 ~ fruitValue:", fruitValue);
    switch(fruitValue){
        case "苹果":
        //alert("用户喜欢苹果");
        break;
        case "香蕉":
        //alert("用户喜欢香蕉");
        break;
    }
    function crickBtn1(){
        console.log("btn1被点击");
    }
   }
   var btn3 = document.getElementById("btn3");
   console.log("🚀 ~ btn3:", btn3)
   if(btn3){
    btn3.onclick = function(){
        console.log("btn3被点击");
    }
   }
  </script>
</html>